<template>
    <view class="face" :class="{show:show}">
        <view class="icon icon-face" @click="toggleShow"></view>
        <view @touchstart="onTouchstart" class="face-main" ref="dialog">

            <!-- <view class="face-tab d-r">
                <view class="face-tab-item" @click="selectFace(0)">
                    <view class="icon icon-face"></view>
                </view>
                <view
                    class="face-tab-item"
                    v-for="(item, index) in bigEmojiList"
                    :key="index"
                    @click="selectFace(index + 1)"
                >
                    <image
                        class="face-icon"
                        :src="faceUrl + item.icon + '@2x.png'"
                    ></image>
                </view>
                <view class="send-btn" @click="handleSendEmoji">发送</view>
            </view> -->
            <!-- v-if="currentIndex === index" -->
            <!-- v-for="(item, index) in list" -->
            <view
                class="face-main-box"
            >   
				<swiper style="height: 500rpx;" @change="changeSwiper" :current="current">
					<swiper-item>
						<waterfall class="face-list" column-count="8" :column-gap="0" column-width="auto">
						    <cell
						        class="face-list-item"
						        v-for="(childrenItem, childrenIndex) in list"
						        :key="'key'+childrenIndex"
						        @tap="select(childrenItem, childrenIndex)"
						    >
						    <!-- emojiUrl + emojiMap[childrenItem] -->
						        <text
						            class="emo-image"
						        >
						            {{ childrenItem }}
						        </text>
						        <!-- <image
						            class="face-img"
						            :src="faceUrl + childrenItem + '@2x.png'"
						        ></image> -->
						    </cell>
						    <cell :style="{height:lastHeight+'px'}">
								
						    </cell>
						
						</waterfall>
					</swiper-item>
					<swiper-item>
						<waterfall
							column-count="4" 
							column-width="auto"
							:show-scrollbar="false"
							:left-gap="sidesWidth"
							:right-gap="sidesWidth"
							:always-scrollable-vertical="true"
							ref="expression_list_ref"
							:column-gap="intervalWidth"
							@loadmore="getMoreExpression"
						>
							<refresh
							    :display="expression_refreshing ? 'show' : 'hide'"
							    @pullingdown="onpulldown"
							    @refresh="onrefresh()"
							>
							    <view class="refreshing">
							        <image
							            style="width: 35rpx; height: 35rpx"
							            src="/static/grey.gif"
							            mode=""
							        />
							        <text class="text">{{ refresh_text }}</text>
							    </view>
							</refresh>
						    <cell
						        v-for="(childrenItem, childrenIndex) in expressionList"
						        :key="'key'+childrenIndex"
								:id="'expression'+childrenIndex"
						        @longpress="showControl(`expression${childrenIndex}`,childrenItem)"
								@tap="sendExpression(childrenItem)"
						    >
						        <image
									mode="aspectFill"
						            style="width: 160rpx;height: 160rpx;"
						            :src="childrenItem.url"
						        ></image>
						    </cell>
						    <cell :style="{height:lastHeight+'px'}">
						    	
						    </cell>
						</waterfall>
					</swiper-item>
				</swiper>
                
				
                <!-- :style="{bottom:systemInfo?.safeAreaInsets?.bottom+'px'}" -->
                <view class="c">
                    <view class="bg">
                        <view class="top_shadow"></view>
                        <view class="box">
							<view class="del-btn" :class="{'disabled':!inputText}" @tap="changeEmote()">
								<image v-if="current === 0" style="width: 38rpx;height: 38rpx;" src="/static/im/emote-emoji-yes.png"></image>
								<image v-else style="width: 38rpx;height: 38rpx;" src="/static/im/emote-emoji-no.png"></image>
							</view>
							<view class="del-btn" :class="{'disabled':!inputText}" @tap="changeExpression()">
								<image v-if="current === 1" style="width: 42rpx;height: 42rpx;" src="/static/im/emote-collect-yes.png"></image>
								<image v-else style="width: 42rpx;height: 42rpx;" src="/static/im/emote-collect-no.png"></image>
							</view>
                            <view class="del-btn" :class="{'disabled':!inputText}" @tap="handleDel">
                                <image v-if="inputText" class="del_icon" src="/static/im/del-active.png"></image>
                                <image v-if="!inputText" class="del_icon" src="/static/im/del-disabled.png"></image>
                            </view>
                            <view class="send-btn" :class="{'disabled':!inputText}"    @tap="handleSendEmoji">
                                <text class="text" :class="{'disabled':!inputText}">发送</text>
                            </view>
                        </view>
                        <view class="bottom_shadow"></view>
                    </view>
                </view>
            </view>

        </view>
		
    </view>
	
</template>

<script lang="ts">

import {
    defineComponent,
    reactive,
    watch,
    watchEffect,
    toRefs,
    computed,
    ref,
	onMounted,
	nextTick
} from "vue";
import {
    emojiUrl,
    emojiMap,
    emojiName,
    faceUrl,
    bigEmojiList,
} from "../../../../../utils/emojiMap";

import emojiArr from '@/utils/emojiCodes.js'
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { getUserExpression,delUserExpression,topUserExpression } from "@/api/api"
import { userData as userDataStore } from "@/store/userData";
// import TUIMessage from '../../../../components/message';
// import { onClickOutside } from '@vueuse/core';
const userData = userDataStore();
const Face = defineComponent({
    props: {
        show: {
            type: Boolean,
            default: () => false,
        },
        isMute: {
            type: Boolean,
            default: () => false,
        },
        inputText: {
            type: String,
            default: () => '',
        },
    },
    setup(props: any, ctx: any) {
        const data = reactive({
            emojiUrl,
            emojiMap,
            emojiName,
            faceUrl,
            bigEmojiList,
            show: false,
            currentIndex: 0,
            isMute: false,
            inputText:'',
			showEmoji:true,
			showExpression:false,
			current:0
        });
        const dialog: any = ref();
		
        const systemInfo = systemInfoStore();

        watchEffect(() => {
            data.show = props.show;
            data.isMute = props.isMute;
            data.inputText = props.inputText
			//onrefresh()
        });
		onMounted(() => {
			onrefresh()
		})
		const onTouchstart = () => {
			uni.$emit("hideControlExpression");
		}
		const showControl = (id:string,childrenItem:any) => {
			uni.createSelectorQuery().select(`#${id}`).boundingClientRect((rect:any) => {
				let params = {
					location:rect,
					expression:childrenItem
				} 
				uni.$emit("showControlExpression", params);
			}).exec();  
		}
		const sendExpression = (item:any) => {
			uni.$emit("handleSendExpressionMessage", item.url);
		}
        const toggleShow = () => {
            if (!data.isMute) {
                data.show = !data.show;
            }
            if (!data.show) {
                selectFace(0);
            }
        };

        const lastHeight = computed(()=>{
            return uni.upx2px(93.75)+Number(systemInfo?.safeAreaInsets?.bottom);
        })
		const deleteExpression = (id:string) => {
			delUserExpression({id:id}).then((res:any) => {
				if(res.success){
					uni.showToast({
						title:'删除成功',
						icon:'none',
						duration:1500
					})
					onrefresh()
				}else{
					
					uni.showToast({
						title:res.message,
						icon:'none',
						duration:1500
					})
				}
			})
		}
		const topExpression = (id:string) => {
			topUserExpression({id:id}).then((res:any) => {
				if(res.success){
					uni.showToast({
						title:'移动成功',
						icon:'none',
						duration:1500
					})
					onrefresh()
				}else{
					
					uni.showToast({
						title:res.message,
						icon:'none',
						duration:1500
					})
				}
			})
		}
        const select = async (item: string, index?: number) => {
            const options: any = {
                name: item,
            };

            return ctx.emit("send", options);
        };
        const list = computed(() => {
            const emjiList = emojiArr;
            return emjiList;
        });

        const selectFace = (index: number) => {
            data.currentIndex = index;
        };
        const handleSendEmoji = () => {
			uni.$emit("hideControlExpression");
            return ctx.emit("handleSendEmoji");
			
        };
        const handleDel = () => {
			uni.$emit("hideControlExpression");
            return ctx.emit("handleDel");
        };
		const changeEmote = () => {
			data.current = 0
			uni.$emit("hideControlExpression");
		}
		const changeSwiper = (e:any) => {
			data.current = e.detail.current
		}
		const changeExpression = () => {
			data.current = 1
			uni.$emit("hideControlExpression");
		}
		
		//自定义表情分页加载
		const expressionList:any = ref([])
		const expression_list_ref = ref()
		
		const expression_refreshing = ref(false);
		const refresh_text = ref("下拉刷新");
		let expression_params = {
			userId:userData.id,
			page:1,
			rows:12,
			end:false
		}
		const onpulldown = (e: any) => {
		    if (e.pullingDistance > 50) {
		        refresh_text.value = "释放刷新";
		    }
		};
		const onrefresh = () => {
			expression_refreshing.value = true
			expression_params.end = false
			refresh_text.value = "正在刷新";
			expression_params.page = 1
			expressionList.value = []
			loadExpression()
		}
		const getMoreExpression = () => {
			if(expression_params.end)return
			expression_params.page ++
			loadExpression()
		}
		const loadExpression = () => {
			getUserExpression(expression_params).then((res:any) => {
				if(res.success){
					expressionList.value.push(...res.data.list)
					expression_refreshing.value = false
					if(res.data.pageNum == res.data.pages){
						expression_params.end = true
					}
					nextTick(()=>{
					    expression_list_ref.value.resetLoadmore();
						refresh_text.value = "下拉刷新";
					})
				}
			})
		}
		const sidesWidth = computed(()=>{
		    return uni.upx2px(15);
		})
		const intervalWidth = computed(()=>{
		    return uni.upx2px(20);
		})
        return {
            ...toRefs(data),
            systemInfo,
            lastHeight,
            toggleShow,
            select,
            selectFace,
            list,
            dialog,
            handleSendEmoji,
            handleDel,
			changeEmote,
			showControl,
			sendExpression,
			onTouchstart,
			deleteExpression,
			topExpression,
			//自定义表情分页
			expressionList,
			expression_list_ref,
			expression_refreshing,
			refresh_text,
			onpulldown,
			onrefresh,
			getMoreExpression,
			sidesWidth,
			intervalWidth,
			changeExpression,
			changeSwiper
        };
    },
});
export default Face;
</script>

<style lang="scss" scoped>
.face {
    position: absolute;
    cursor: pointer;
    width: 750rpx;
    height: 500rpx;
    top:0;
    transform: translateX(750rpx);
    &.show{
        transform: translateX(0);
    }
    &-main {
        position: absolute;
        // z-index: 5;
        width: 750rpx;
        height: 500rpx;
        background: #ffffff;
        padding-top:15rpx;
        //box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        // padding: 10px;
        display: flex;
        flex-direction: column;
    }
    &-main-box {
        position:relative;
        width: 750rpx;
        height: 500rpx;
        //box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        display: flex;
        .c{
            position:absolute;
            bottom:0rpx;
            z-index:10;
            right:0rpx;

            .bg{
                width:540rpx;
                height:170rpx;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .top_shadow{
                    position: relative;
                    width:540rpx;
                    height:52rpx;
                    top:2rpx;
                    background-image:linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0));
                }
                .bottom_shadow{
                    width:540rpx;
                    height:80rpx;
                    background:#fff;
                    // background-image:linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0));
                }
            }
            .box{
                width:540rpx;
                padding:10rpx;
                background:#ffffff;
                border-radius: 10rpx;
                padding-right:20rpx;
                display: flex;
                flex-direction:row;
                justify-content:space-between;
                box-shadow:10px 10px 10px #fff;

            }
            .send-btn{
                width:110rpx;
                height:70rpx;
                background-color:#1DC691;
                border-radius:8rpx;
                display:flex;
                align-items:center;
                justify-content:center;
                .text{
                    color:#fff;
                    font-size:15px;
                    &.disabled{
                        color:#999;
                    }
                    
                }

                &.disabled{
                    background:#f5f5f5;
                }
                &:active{
                    opacity: .7;
                }

            }

            .del-btn{
                width:110rpx;
                height:70rpx;
                background:#f5f5f5;
                border-radius:8rpx;
                display:flex;
                flex-direction: row;
                align-items:center;
                justify-content:center;
                .text{
                    color:#333;
                    font-size:13px;
                    &.disabled{
                        color:#999;
                    }
                }

                .del_icon{
                    width:30px;
                    height:30px;
                }

                &:active{
                    opacity: .7;
                }

            }
        }
    }
    &-list {
        width: 750rpx;
        height: 500rpx;
        display: flex;
        flex-direction: row !important;
        flex-wrap: wrap;
        &-item {
            width:93.75rpx;
            height:93.75rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .emo-image {
                font-size:30px;
            }
        }
        .face-img {
            width: 30px;
            height: 30px;
        }
    }
    &-tab {
        display: flex;
        align-items: center;
        height:80rpx;
        &-item {
            padding: 8px;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .face-icon {
                display: block;
                height: 30px;
                width: 30px;
            }
            img {
                width: 30px;
            }
        }
        .send-btn {
            position: absolute;
            background-color: #55c06a;
            color: #ffffff;
            line-height: 30px;
            font-size: 13px;
            text-align: center;
            width: 50px;
            height: 30px;
            right: 10px;
        }
    }
	
}
.tip-button{
	height: 162rpx;
	position: fixed;
	.button-control {
		background: #4c4c4c;
		// padding: 0 30rpx;
		flex-direction: row;
		justify-content: flex-start;
		border-radius: 10rpx;
		overflow: hidden;
		// justify-content: space-between;
		margin-top: 15rpx;
		
		.control-box {
			width: 110rpx;
			height: 130rpx;
			align-items: center;
			justify-content: center;
			padding: 15rpx 0;
			margin: 0;
			.box-img {
				width: 45rpx;
				height: 45rpx;
				margin-bottom: 6rpx;
			}
			.box-text {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
	.button-dot {
		position: absolute;
		width: 30rpx;
		height: 18rpx;
		bottom: 2px;
		left: 95rpx;
	}
}
.refreshing {
    width: 750rpx;
    height: 50px;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .text {
        font-size: 28rpx;
        color: #999;
        margin-left: 20rpx;
    }
}

</style>
